<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="..\css\elementUi.css"/>
    <style>
        .el-form-item {
            margin-bottom: 7px;
        }

        .el-tabs__content {
            height: 500px;
        }

        .el-transfer-panel {
            width: 400px;
        }
    </style>
</head>
<body>
<div id="app">

    <el-row>
        <el-col :span="20">
            <el-menu theme="light" class="el-menu-demo" mode="horizontal">
                <div>
                    <el-button type="primary" size="large" icon="search" @click="queryWorkCenter">检索</el-button>
                    <el-button type="primary" size="large" @click="saveWorkCenter('workCenterForm')">保存</el-button>
                    <el-button type="primary" size="large" @click="clearWorkCenter">清除</el-button>
                    <el-button type="primary" size="large" icon="delete" @click="deleteWorkCenter">删除</el-button>
                </div>
                <!-- <el-menu-item index="1">

                 </el-menu-item>-->
            </el-menu>
        </el-col>
        <el-col :span="4">
            <el-menu theme="light" class="el-menu-demo" mode="horizontal">
                <span style="font-size: 2em;">工作中心维护</span>
                <!--<el-menu-item index="2"></el-menu-item>-->
            </el-menu>
        </el-col>
    </el-row>
    <el-form :inline="true" :model="workCenterForm" :rules="rules" ref="workCenterForm" label-suffix=":"
             style="padding:10px 20px 0px 10px;" label-width="240px" class="demo-form-inline">
        <div style="padding: 30px;">

            <el-row justify="center" type="flex" class="row-bg">
                <input type="hidden" id="workCenterHandleHidden" value=""/>
                <el-col :span="16">
                    <el-form-item label="工作中心" prop="workCenter">
                        <el-input placeholder=""
                                  icon="search"
                                  v-model="workCenterForm.workCenter"
                                  :on-icon-click="workCenterSearch"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 工作中心检索弹出框 -->
            <el-dialog title="资源" :visible.sync="workCenterSearchDialog" top="5%">
                <el-table :data="workCenterDataDialog" @row-dblclick="selectedRowWorkCenter" border style="width: 100%"
                          height="600">
                    <el-table-column property="workCenter" label="工作中心" width="350"></el-table-column>
                    <el-table-column property="description" label="描述" width="400"></el-table-column>
                </el-table>
            </el-dialog>
        </div>

        <!--<p style="line-height:100%">-->
        <template>
            <el-tabs type="border-card" v-model="activeName">
                <el-tab-pane label="主要信息" name="first">
                    <el-row type="flex" class="row-bg">
                        <el-col>
                            <el-form-item label="描述">
                                <el-input placeholder="" style="width: 850px;"
                                          v-model="workCenterForm.description"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg" :gutter="4">
                        <el-col :span="12">
                            <el-form-item label="状态">
                                <el-select v-model="workCenterForm.statusFk" placeholder="请选择">
                                    <el-option
                                            v-for="item in statusList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg">
                        <el-col :span="10">
                            <el-form-item label="工作中心类别">
                                <el-select v-model="workCenterForm.wcCategory" placeholder="请选择">
                                    <el-option
                                            v-for="item in catList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="工作中心类型">
                                <el-select v-model="workCenterForm.wcType" placeholder="请选择">
                                    <el-option
                                            v-for="item in typeList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row type="flex" class="row-bg">
                        <el-col :span="10">
                            <el-form-item label="强制分配">
                                <el-select v-model="workCenterForm.assignmentEnforcement" placeholder="请选择">
                                    <el-option
                                            v-for="item in assignList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="可将车间作业控制下达至此工作中心">
                                <el-checkbox v-model="workCenterForm.canBeReleasedTo"></el-checkbox>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 表格开始 -->
                    <el-row type="flex" class="row-bg" style="margin-top: 30px;margin-left: 180px;">
                        <el-col :span="6">
                            <el-button type="primary" @click="addNewItem">插入新项</el-button>
                            <el-button type="primary" @click="deleteOneResRefWork">删除</el-button>
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg" style="margin-top: 10px;margin-left: 180px;">
                        <el-table
                                ref="resOrWorTabData"
                                :data="resourceOrWorkcenterData"
                                border
                                @selection-change="selectDeleteData"
                                tooltip-effect="dark"
                                style="width: 60%">
                            <el-table-column
                                    type="selection"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    label="序号"
                                    prop="sequence"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="type"
                                    label="类型"
                                    width="250">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="名称"
                                    width="252"
                                    show-overflow-tooltip>
                            </el-table-column>
                        </el-table>
                    </el-row>
                    <!-- 表格结束 -->

                    <!-- 新增一行资源与工作中心对应关系弹出 -->
                    <el-dialog title="新增" :visible.sync="newAddDataDialog" top="5%">
                        <el-form :model="resourceWorkCenterForm" label-suffix=":" label-width="120px">
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="顺序">
                                        <el-input v-model="resourceWorkCenterForm.sequence" :disabled="true"
                                                  auto-complete="off"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="类型">
                                        <template>
                                            <el-select v-model="resourceWorkCenterForm.type" placeholder="请选择">
                                                <el-option
                                                        v-for="item in selectType"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </template>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="资源或工作中心">
                                        <input type="hidden" id="resourceOrWorkcenterFk" value=""/>
                                        <el-input placeholder=""
                                                  icon="search"
                                                  v-model="resourceWorkCenterForm.name"
                                                  :on-icon-click="chooseResOrWork"></el-input>
                                    </el-form-item>
                                </el-col>

                            </el-row>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="newAddDataDialog = false">取 消</el-button>
                            <el-button type="primary" @click="saveOneWorkAndRes">确 定</el-button>
                        </div>

                    </el-dialog>

                    <!-- 资源或工作中心检索弹出框 -->
                    <el-dialog title="资源或工作中心" :visible.sync="workOrResDialog" top="5%">
                        <el-table :data="workOrResDataDialog" @row-dblclick="selectedRowWorOrRes" border
                                  style="width: 100%" height="800">
                            <el-table-column property="name" label="名称" width="370"></el-table-column>
                            <el-table-column property="description" label="描述"
                                             width="370"></el-table-column>
                        </el-table>
                    </el-dialog>

                </el-tab-pane>
            </el-tabs>
        </template>
    </el-form>
</div>
</body>
<!-- 先引入 Vue -->
<script src="..\lib\vue.js"></script>
<!-- 引入组件库 -->
<script src="..\lib\elementUi.js"></script>
<script type="text/javascript" src="..\lib\mock.js"></script>
<script src="..\lib\axios.js"></script>
<script type="text/javascript" src="workCenter.js"></script>
<script type="text/javascript" src="..\lib\jquery-3.2.1.min.js"></script>
</html>